import React from "react";
// import './index.css';
import TradePublishType from "../../../../Component/TradePublishType";
import BlockContainer from "../../../../Component/BlockContainer";
import DroneManger from "./DroneManger";
import Accessory from "./Accessory";
import MessageUtil from "../../../../utils/MessageUtil";

export default class extends React.Component{
    
    constructor(props){
        super();
        this.state={
            showNoneDrone:false, //是否显示无飞行器
            tab:0
        }
    }
    SelectDrone(){
        this.setState({
            tab:0
        },()=>{
            MessageUtil.ChangeHeight();
        })
    }
    SelectAccessory(){
        this.setState({
            tab:1
        },()=>{
            MessageUtil.ChangeHeight();
        })
    }
    render(){
        let showContainer="";
        switch (this.state.tab) {
            case 0:
                showContainer=<DroneManger/>;
                break;
            case 1:
                showContainer=<Accessory/>;
                break;
            default:
                break;
        }
        return(
            <div>
                <div>
                    <BlockContainer title={<span>
                            <img src="/assets/Trade/Layer.png" alt="layer"/> 选择发布产品类型
                        </span> }
                    content={<TradePublishType drone={e=>this.SelectDrone(e)} accessory={e=>this.SelectAccessory(e)}/> } 
                    logo=""
                    />
                </div>
                <div className="Publish_SecondHand_Title" >
                    {showContainer}
                </div>
            </div>
        )
    }
}